<html>

<head>
  <link rel="stylesheet" href="./popup.scss">
</head>

<body>
  <main>
    <!-- The slider -->
    <div id="volume-slider" class="mdc-slider" aria-valuemin="0" aria-valuemax="600" aria-valuenow="100" data-step="10"
      tabindex="0" role="slider" aria-label="Select Volume">
      <div class="mdc-slider__track-container">
        <div class="mdc-slider__track"></div>
      </div>
      <div class="mdc-slider__thumb-container">
        <svg class="mdc-slider__thumb" width="21" height="21">
          <circle cx="10.5" cy="10.5" r="7.875"></circle>
        </svg>
        <div class="mdc-slider__focus-ring"></div>
      </div>
    </div>

    <div class="volume-specify">
      <button class="volume-specify-btn">20</button>
      <button class="volume-specify-btn">50</button>
      <button class="volume-specify-btn">100</button>
      <button class="volume-specify-btn">200</button>
      <button class="volume-specify-btn">300</button>
      <button class="volume-specify-btn">500</button>
    </div>
  </main>

  <script src="./popup.ts"></script>
</body>

</html>
